<template>
 <div class="login">
  <i class="el-icon-warning"></i>
  <h6>{{ $t('convert.login.title') }}</h6>

  <div class="btn">
   <el-button round @click="login">{{ $t('convert.login.login') }}</el-button>
   <el-button type="primary" round @click="register">{{ $t('convert.login.register') }}</el-button>
  </div>
 </div>
</template>

<script>
export default {
 name: "Login",
 methods: {
  // 前往登录页
  login () {
   this.$router.push({
    path: '/Login'
   })
  },
  // 前往注册页
  register () {
   this.$router.push({
    path: '/Register'
   })
  }
 }
}
</script>

<style scoped lang="scss">
.login {
 max-width: 600px;
 border-radius: 10px;
 -webkit-box-shadow: 0 0 10px rgba(179,189,199,0.3);
 box-shadow: 0 0 10px rgba(179,189,199,0.3);
 padding: 40px 50px;
 text-align: center;
 width: 95%;
 display: flex;
 flex-direction: column;
 align-items: center;

 i {
  font-size: 50px;
  color: #eb716e;
  margin-bottom: 30px;
 }

 h6 {
  font-size: 20px;
  color: #a1a5b3;
 }

 .btn {
  display: flex;
  align-items: center;
  margin-top: 40px;

  .el-button {
   color: #002445;
   border: 1px solid #002445;
   cursor: pointer;
   border-radius: 100px;
   display: inline-block;
   padding: 10px 50px;
   margin: 0 10px;
   height: 43px;
   transition: .3s;

   &:hover {
    transform: scale(1.2);
    transition: .3s;
    background-color: transparent;
   }

   &:nth-of-type(1) {
    margin-right: 15px;
   }

   &:nth-of-type(2) {
    border: none;
    background: #002445;
    color: #fff;
   }
  }
 }
}
</style>
